<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 高级元素: table/form -->
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>身高</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Lily</td>
          <td>18</td>
          <td>1.88</td>
        </tr>
        <tr>
          <td>kobe</td>
          <td>30</td>
          <td>1.98</td>
        </tr>
      </tbody>
    </table>

    <form action="">
      <input name="account" type="text" />
      <input name="password" type="password" />
      <input name="hobbies" type="checkbox" checked />
      <select name="fruits">
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
      </select>
    </form>

    <script>
      var tableEl = document.body.firstElementChild;
      // 通过table元素获取内部的后代元素
      // console.log(tableEl.tHead, tableEl.tBodies, tableEl.tFoot)
      // console.log(tableEl.rows) //所有行

      // 拿到一行元素
      // var rowEl = tableEl.rows[2] //行
      // console.log(rowEl.cells[0]) //列
      // console.log(rowEl.sectionRowIndex) //行索引（基于body）
      // console.log(rowEl.rowIndex) //行索引（基于整个table）

      // 1.获取form
      // var formEl = document.body.firstElementChild
      var formEl = document.forms[0]; //获取所有的form

      // 2.获取form中的子元素  elements独有的
      // var inputEl = formEl.elements[0];
      var inputEl = formEl.elements.account; //获取有name属性的元素
      inputEl.innerHTML = "1";
      setTimeout(function () {
        console.log(inputEl.value);
      }, 1000);
    </script>
  </body>
</html>
